<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="app_header">
          Docker管理页面
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div class="sidebar" id="sidebar">
            <ul>
              <li @click="showContent('image-application')">沙盒镜像申请</li>
              <li @click="showContent('container-deployment')">沙盒镜像申请列表</li>
              <li @click="showContent('deployment-history')">沙盒容器部署历史记录</li>
              <li @click="showContent('build-image-from-container-history')">从沙盒容器构建镜像历史记录</li>
              <li @click="showContent('deploy-container-from-image-history')">基于镜像部署容器历史记录</li>
              <li @click="showContent('normal-deploy-container-from-image-history')">一般容器部署</li>
            </ul>
          </div>
        </el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 导入 useRouter

// 定义显示内容的函数
const showContent = (id) => {
  switch (id) {
    case 'image-application':
      console.log('沙盒镜像申请');
      break;
    case 'container-deployment':
      console.log('沙盒镜像申请列表');
      break;
    case 'deployment-history':
      console.log('沙盒容器部署历史记录');
      break;
    case 'build-image-from-container-history':
      console.log('从沙盒容器构建镜像历史记录');
      break;
    case 'deploy-container-from-image-history':
      console.log('基于镜像部署容器历史记录');
      break;
    case 'normal-deploy-container-from-image-history':
      console.log('一般容器部署');
      break;
    default:
      console.log('未定义的操作');
      break;
  }
};
</script>

<style scoped>
.app_header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: blue;
  color: white;
  padding: 20px;
  font-size: 24px;
}

.sidebar {
  background-color: #f4f4f4;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.sidebar li:hover {
  background-color: #dcdcdc;
  color: #333;
}
</style>
